React Tableで編集可能なtableを作ってみる
参考ページ
coding方針
参考ページのcodeを単純化して適用する
dataは固定
pagenationは削除
styleは/icons2/Bulma.iconで作る
/icons/typescript.iconに書き換える
10:17:33 実装開始
10:19:26 footerはいらないので削除した
10:20:41 exampleはEditableCellとTableでcomponentを分けているようだ
まずはEditableCellを移植してみる
10:26:25 defaultColumn?に設定するのか？
EditableCellの引数が変なことになってる
10:34:10 これがわからん
code:tsx
// Create an editable cell renderer
const EditableCell = ({
value: initialValue,
row: { index },
column: { id },
updateMyData, // This is a custom function that we supplied to our table instance
}) => {
...
}
どうやって/icons/typescript.iconで表現するんだ？
多分これ、valueをinitialValueという名前で使うとかそういう意味ではないか？
10:40:45 とりあえず全部の別名表記を消した
<Table>で対処すればなんとかなるだろう
10:43:24 いやだめだ。useTableに渡す変数だから、関数の型は同じでないといけない
10:49:26 useTableのcode
defaultColumnで検索をかけたところ、この部分を見るとわかりそうな感じ
decorateColumn(d, defaultColumn)
`makeHeaderGroups(visibleColumns, defaultColumn)
直接使っているのはこの部分
columnに合体させているみたい`
なんかこれもう型が無茶苦茶になってそう
@types/react-tableを読んだほうが早い気がしてきた
11:05:33 みた。Partial<Column<D>>で定義されていた
Column<D>をoptionalにしたやつなのか。としたらColumn<D>の中身を知る必要があるな。
11:08:02 だんだんわかってきた。
Column<D>には次のようなobjectを入れられる
code:ts
{
accessor: 'accessor',
Header: 'Header',
Cell: ({ row: { original } }) => (
<button
onClick=(() => console.log(original))
Button text
</button>
),
},
このCellに、今回の話題であるEditableCellが入ってくる
Cellの型はColumnInterfaceBasedOnValue
引数の型はこれだ
code:ts
export type CellProps<D extends object, V = any> = TableInstance<D> & {
column: ColumnInstance<D>;
row: Row<D>;
cell: Cell<D, V>;
value: CellValue<V>;
};
TableInstance<D>とintersectionしている理由がわからんが、ともあれproperitiesはこの通りに作ればよさそうだ。
Reference
Cellをcustomizeする方法が2つ書かれている
defaultColumnを使う方法
元dataにcellpropertyを生やす方法
11:37:39 できた
updateMyDataはまだ設定していない
型がわからない
あとで設定する
11:46:35 skipPageResetはいらないので消す
12:13:05 defaultColumnの型定義が通らない……
updateTableData (updateMyDataの名前を変えた) が余計な引数として入ってしまうのがだめみたい？
17:07:07 これ単純に{{Cell: EditableCell}}にしていないだけだった
17:44:50 とりあえず編集できるようになった
EditableCellはReact.FC<CellProps<TableData, string>>にした
defaultColumnsはPartial<Column<TableData>>にした
updateTableDataはuseTableのpropertyにはないが、useTableのoptionsの末尾に渡すことで、react tableが勝手にEditableCellに渡してくれる
17:55:57 値の更新処理関数が適当だったのでなおした
ついでにデータをlogに出力できるようにした
17:51:29 とりあえず動くsampleはできた
/icons/typescript.icon
編集可能
要素の追加削除はなし
この後試すこと
要素の追加削除
対して難しくないと思う
元dataに要素を追加削除すればいいだけ
D&D
Pagenation
これは一番後だな
data driven
与えられたdataのを変換して表示するのに使えそうな雰囲気
Selection
18:41:27 これやらないと任意の要素のdeleteができない